<template>
	<div>
		<div class="recommend-title">猜你喜欢</div>
		
		<ul class="item-ul">
			<router-link 
				tag="li" 
				class="item border-bottom" 
				v-for="item of list" 
				:key="item.id"
				:to="'/detail/' + item.id"
				>
				<div class="item-img-wrapper">
					<img :src="item.imgUrl" alt="" class="item-img" />
					
				</div>
				
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<button class="item-button">查看详情</button>
				</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "Home-Recommend",
		props: {
			list: Array
		},
		data () {
			return{
				
			}
		}
	}
</script>

<style lang="stylus" scoped="scoped">
	@import '~styles/mixins.styl'
	.recommend-title
	  text-indent: 0.24rem;
	  line-height: .8rem;
	  background: #eee;
	.item-ul
	  margin-left: .24rem;
		.item
		  display: flex;
		  position: relative;
		  overflow: hidden;
		  padding: 0.2rem 0;
			.item-img-wrapper img
			  float: left;
			  overflow: hidden;
			  width: 2rem;
			  height: 2rem;
			.item-info
			  flex: 1;
			  padding: .1rem;
			  min-width: 0;
				.item-title
				  line-height: .54rem;
				  font-size: .32rem;
				.item-button
				  background: #ff9300;
				  padding: .1rem;
				  border-radius: 6px;
				  color: #fff;
				  font-size: .20rem;
				  margin-top: .4rem;
				.item-desc
				  line-height: .4rem;
				  color: #ccc;
				  ellipsis()
				
			
			    			    
	  
</style>